<template>
    <div class="register">
        <div class="login_title">工艺数据分析软件</div>
        <el-form
            ref="registerForm"
            :model="registerForm"
            :rules="registerRules"
            class="register-form"
        >
            <h3 class="title">新用户注册</h3>
            <el-form-item prop="userType">
                <el-select
                    size="small"
                    style="width: 100%"
                    v-model="registerForm.userType"
                    clearable
                    placeholder="用户类型"
                >
                    <el-option label="所外学生用户" :value="1"></el-option>
                    <el-option label="所外企业用户" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="nickName">
                <el-input
                    size="small"
                    v-model="registerForm.nickName"
                    type="text"
                    auto-complete="off"
                    placeholder="用户名"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    size="small"
                    v-model="registerForm.password"
                    type="text"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter.native="handleRegister"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="email">
                <el-input
                    size="small"
                    v-model="registerForm.email"
                    type="text"
                    auto-complete="off"
                    placeholder="邮箱"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="userName">
                <el-input
                    size="small"
                    v-model="registerForm.userName"
                    type="text"
                    auto-complete="off"
                    placeholder="姓名"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="phoneNumber">
                <el-input
                    size="small"
                    v-model="registerForm.phoneNumber"
                    type="text"
                    auto-complete="off"
                    placeholder="手机号"
                >
                </el-input>
            </el-form-item>

            <el-form-item >
                <el-radio-group v-model="registerForm.sex" size="small">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="birthday">
                <el-date-picker
                    v-model="registerForm.birthday"
                    style="width: 100%"
                    type="date"
                    placeholder="出生日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item  prop="company">
              <el-select
                    size="small"
                    style="width: 100%"
                    v-model="registerForm.company"
                    clearable
                    placeholder="公司名称/学校名称"
                    filterable
                >
                    <el-option :label="item.name" :value="item.id" :key="index" v-for="(item,index) in companyList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="companyName" v-if="registerForm.company == 44 || registerForm.company == otherId">
              <el-input
                    size="small"
                    v-model="registerForm.companyName"
                    clearable
                    placeholder="请输入公司名称/学校名称">
                </el-input>
            </el-form-item>

            <el-form-item prop="profession">
              <el-select
                    size="small"
                    style="width: 100%"
                    v-model="registerForm.profession"
                    clearable
                    placeholder="专业"
                >
                <el-option :label="item.name" :value="item.id" :key="index" v-for="(item,index) in majorList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button
                    :loading="loading"
                    size="medium"
                    type="primary"
                    style="width: 100%"
                    @click.native.prevent="handleRegister"
                >
                    <span v-if="!loading">注 册</span>
                    <span v-else>注 册 中...</span>
                </el-button>
                <div style="float: right">
                    <router-link class="link-type" :to="'/login'"
                        >使用已有账户登录</router-link
                    >
                </div>
            </el-form-item>
        </el-form>
        <!--  底部  -->
    </div>
</template>

<script>
import { getCodeImg, register } from '@/api/login'

export default {
  name: 'Register',
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      codeUrl: '',
      registerForm: {
        nickName: '',
        password: '',
        userType: '',
        sex:1,
        company:'',
        profession:'',
        companyName: ''
      },
      registerRules: {
        userType: [{ required: true, trigger: 'change', message: '请选择用户类型' }],
        nickName: [
          { required: true, trigger: 'blur', message: '请输入用户名' },
          {
            min: 2,
            max: 20,
            message: '用户账号长度必须介于 2 和 20 之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' },
          {
            min: 5,
            max: 20,
            message: '用户密码长度必须介于 6 和 20 之间',
            trigger: 'blur'
          },
          // {
          //   pattern: /^[^<>"'|\\]+$/,
          //   message: '不能包含非法字符：< > " \' \\ |',
          //   trigger: 'blur'
          // }
        ],
        email:[
          {
            pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: '邮箱输入不正确',
            trigger: 'blur'
          }
        ],
        phoneNumber:[
          {
            pattern: /^1[0-9][0-9]\d{8}$/,
            message: '手机号输入不正确',
            trigger: 'blur'
          }
        ],
        userName: [
          { required: true, trigger: 'blur', message: '请输入姓名' },
          {
            min: 2,
            max: 20,
            message: '姓名长度必须介于 2 和 20 之间',
            trigger: 'blur'
          }
        ],
        company:[{ required: true, trigger: 'change', message: '请选择公司名称/学校名称' }],
        profession:[{ required: true, trigger: 'change', message: '请选择专业' }],
        companyName:[{ required: true, trigger: 'blur', message: '请输入公司名称/学校名称' }]
      },
      loading: false,
      captchaEnabled: true,
      majorList:[],
      companyList:[],
      otherId: ''
    }
  },
  created() {
    this.companyListFn();
    this.majorType();
  },
  methods: {
    majorType(){
      this.$http({
        url:"/dict/register/major",
        method:'get',
      }).then( ( { data} ) => {
        this.majorList = data.data
        console.log(this.companyList,'fgggg')
      })
    },
    companyListFn(){
      this.$http({
        url:"/dict/register/company",
        method:'get',
      }).then( ( { data} ) => {
        this.companyList = data.data
        const otherItem = this.companyList.find(item => item.dictCode == 'other');
        if (otherItem) {
          this.otherId = otherItem.id;
        } else {
          console.warn('未找到 name 为 "其他" 的项');
        }
        console.log(this.companyList,'fgggg')
      })
    },
    handleRegister() {
      if(this.registerForm.company != 44 && this.registerForm.company != this.otherId) {
        this.registerForm.companyName = ''
      }
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http({
            url:'/user/register',
            method:'post',
            data: this.registerForm
          }).then( ( { data } ) => {
            if(data.code == 200){
              this.$message.success("注册成功")
              this.$router.push('/login')
              this.loading = false
            }else{
              this.$message.error(data.msg)
              this.loading = false
            }

          }).catch((err) => {
            this.$message.error(err)
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // height: 100%;
    // background-image: url("../assets/images/login-background.jpg");
    // background-size: cover;
    height: 100%;
    width: 100%;
    background-image: url("../assets/images/login_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    .login_title {
        margin: 50px auto auto 50px;
        color: #1c2126;
        font-weight: 550;
        font-size: 32px;
    }
}
.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #1c2126;
    font-weight: 550;
}

.register-form {
    border-radius: 6px;
    background: rgb(255, 255, 255, 0.7);
    width: 400px;
    padding: 25px 25px 0;
    margin-left: 60%;
    // margin-top: 3%;
    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}
.register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}
.register-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}
.el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
.register-code-img {
    height: 38px;
}
</style>
